<script setup lang="ts">
import { IconProps } from '@/types/common/components.ts';
import { computed } from 'vue';

/**
 * 接受父节点传值
 */
const props = withDefaults(defineProps<IconProps>(), {
  iconStyle: () => ({ width: '1em', height: '1em' }),
  prefix: 'icon',
});
const iconName = computed(() => `#${props.name}`);
</script>

<template>
  <svg :style="props.iconStyle" class="svg-icon" :class="props.class" aria-hidden="true">
    <use :xlink:href="iconName" :fill="props.color" />
  </svg>
</template>

<style lang="scss" scoped>
.svg-icon {
  vertical-align: -0.15em;
  overflow: hidden;
  fill: var(--edu-text-100);
}
</style>
